<template>
  <div class="home-main7" :newclass="newclass" v-if="con">
    <div class="box">
      <div class="home-top-tit flex-bect wow animated fadeInUp">
        <h2 class="h2">{{title}}</h2>
        <span class="remark">{{remark}}</span>
      </div>
      <div class="con">
        <div class="box1 wow animated fadeInUp" :class="{on : main7_more1}">
          <div class="title flex-bect">
            <span class="btn"><b>国际</b>学校专题</span>
            <b class="more" @click="main7More(1)">更多专题 <span class="jt"></span></b>
          </div>
          <div class="zhuanti-list flex-lect">
            <a v-for="(item, index) in con.gj_list" :key="index" href="" class="item wow animated fadeInUp" :data-wow-delay="(index/100)+'s'" v-show="index < 5 || main7_more1">
              <div class="imgW"><img :src="item.src" alt="" class="img"></div>
              <div class="div">
                <div class="name row1">{{item.name}}</div>
                <div class="flex-bect">
                  <span class="view">{{item.view}}</span>
                  <span class="more">查看详细>></span>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="box1 wow animated fadeInUp" :class="{on : main7_more2}">
          <div class="title flex-bect">
            <span class="btn"><b>私立</b>学校专题</span>
            <b class="more" @click="main7More(2)">更多专题 <span class="jt"></span></b>
          </div>
          <div class="zhuanti-list flex-lect">
            <a v-for="(item, index) in con.sl_list" :key="index" href="" class="item wow animated fadeInUp" :data-wow-delay="(index/10)+'s'">
              <div class="imgW"><img :src="item.src" alt="" class="img"></div>
              <div class="div">
                <div class="name row1">{{item.name}}</div>
                <div class="flex-bect">
                  <span class="view">{{item.view}}</span>
                  <span class="more">查看详细>></span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 不支持 import
module.exports = {
  props:{
    newclass:"",
    title:{
      type:String,
      default:"热门专题"
    },
    remark:{
      type:String,
      default:"大家都在找最好的学校，为孩子全力以赴"
    },
    con:null
    
  },
  data: function () {
    return {
      main7_more1:false,
      main7_more2:false
    };
  },
  components: {},
  mounted(){
    
  },
  methods:{
    main7More(e){
      if(e == 1 && this.con.gj_list.length > 5){
        this.main7_more1 = !this.main7_more1
      }else if(e == 2 && this.con.sl_list.length > 5){
        this.main7_more2 = !this.main7_more2
      }
    },
  }
};
</script>

<style>

</style>